// 固定在页面顶部的导航栏容器
.custom-nav-bar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-sizing: content-box; // padding-top 不计入高度
}

// 标题和图标所在的行
.nav-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

// 导航栏标题
.nav-bar-title {
  font-size: 16PX;
  //font-weight: bold;
  // 通过 flex: 1 和 text-align 实现居中
  flex: 1;
  text-align: center;
  // 防止标题过长时破坏布局
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 左侧图标区域和右侧占位区域
.nav-bar-left,
.nav-bar-right {
  // 设置固定宽度，这是确保标题完美居中的关键
  width: 90px;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-bar-left {
  justify-content: flex-start;
  padding-left: 16px;
  box-sizing: border-box;
}

// 传入的 children 所在的容器
.nav-bar-extra-content {
  padding: 0 15px 10px;
}

// 用于占位的透明元素
.nav-bar-placeholder {
  width: 100%;
  // 高度由 JS 动态设置
}
